<template>
  <div>
    <div>
      <el-button v-for="(item, index) in charts" @click="charts.forEach(i => i.visible = false),item.visible = true">{{ item.title }}</el-button>
    </div>
    <ve-line v-if="charts[0].visible" :data="chartData" ></ve-line>
    <ve-ring v-if="charts[1].visible" :data="chartData" ></ve-ring>
    <ve-bar v-if="charts[2].visible" :data="chartData" :settings="chartSettings"></ve-bar>
    <ve-histogram v-if="charts[3].visible" :data="chartData"/>
    <ve-tree v-if="charts[4].visible" :data="chartData"/>
    <ve-pie v-if="charts[5].visible" :data="chartData"/>
  </div>
</template>
<script>
import VeLine from 'v-charts/lib/line'
import VeRing from 'v-charts/lib/ring'
import VeBar from 'v-charts/lib/bar'
import VeHistogram from 'v-charts/lib/histogram'
import VeTree from 'v-charts/lib/tree'
import VePie from 'v-charts/lib/pie'
export default {
  name: 'vlineDemo',
  components:{
    VeLine,
    VeRing,
    VeBar,
    VeHistogram,
    VeTree,
    VePie
  },
  data() {
    return {
      charts:[
        { title: 'vline', visible: true},
        { title: 'vring', visible: false},
        { title: 'vbar', visible: false},
        { title: 'vhistogram', visible: false},
        { title: 'VeTree', visible: false},
        { title: 'VePie', visible: false},
      ],
      chartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ]
      },
      chartSettings: {}
    }
  }
}
</script>
<style scoped="true">
  .flex {
    display: flex;
    flex-direction: row;
  }
</style>
